<template>
  <VDialog
    @close="handleClose"
    @save="save"
    :loading="loading"
    width="700px"
    title="批量更换部门"
  >
    <template #content>
      <div class="m-[20px]">
        <div>
          <span class="text-[var(--base-text-color)] font-bold">已选中:</span>
          <span class="ml-[16px] mr-[8px] text-[#f00]">{{
            ids?.length || 0
          }}</span
          >条
        </div>
        <div class="my-[20px]">
          <span class="text-[var(--base-text-color)] font-bold">新部门:</span>
          <el-cascader
            :options="menuList"
            v-model="menu_id"
            :props="defaultProps"
            clearable
            class="ml-[16px]"
          />
        </div>
        <div>说明:当用户同时存在多个部门时,系统不支持批量更换</div>
      </div>
    </template>
  </VDialog>
</template>
<script setup>
import { ElMessage } from "element-plus";
import api from "../../api/index";
const props = defineProps({
  menuList: { type: Array, default: () => [] },
  ids: { type: Array, default: () => [] },
});
const { menuList, ids } = toRefs(props);
const menu_id = ref(null);
const defaultProps = {
  children: "sub",
  label: "name",
  value: "id",
  checkStrictly: true,
  emitPath: false,
};
const emit = defineEmits(["update:modelValue", "close", "refresh"]);
const loading = ref(false);
const handleClose = async (refresh) => {
  menu_id.value = null;
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
const save = async () => {
  try {
    loading.value = true;
    const { code, message } = await api.changeDepartment({
      ids: ids.value,
      department_id: menu_id.value,
    });
    if (code !== 200) return ElMessage.error(message);
    ElMessage.success("修改成功!");
    handleClose(true);
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
</script>
